TonyMenu Documentation

HTML

Аттрибут Значения По умолчанию Обязательный аттрибут Класс Описание Примечания
data-tm-style 'horizontal', 'vertical' - + .tonyMenu Определяет стиль меню: вертикальный, горизонтальный -
data-tm-breakpoint int 1024 - .tonyMenu Брэйкпоинт мобильной версии -
data-tm-mobile boolean false - .tonyMenu Активация мобильного меню -
data-tm-width horizontal menu: int, 'menu-width', 'menu-outer-width', 'window-limit'

vertical menu: int, 'window-limit'
1170 - .tonyMenu__megamenu Ширина окна мегаменю -
data-tm-align-horizontal [horizontal menu: 'left', 'item', 'item-center', 'left-window'

vertical menu: 'item'
horizontal menu: 'left'

vertical menu: 'item'
- .tonyMenu__megamenu Горизонтальное выравнивание окна мегаменю При парамметрах [horizontal menu: 'item', 'item-center'] игнорируются все указанные параметры аттрибута data-tm-width кроме явного указания ширины [int]
data-tm-align-vertical horizontal menu: 'item', 'menu-bottom'

vertical menu: 'menu-top', 'item-center', 'item'
horizontal menu: 'item'

vertical menu: 'menu-top'
- .tonyMenu__megamenu Вертикальное выравнивание окна мегаменю -
data-tm-animation,
data-tm-animation-in,
data-tm-animation-out
'toggle', 'fade', 'emersion', 'emersion-vertical' 'fade' - .tonyMenu__megamenu Анимация появления, скрытия окна мегаменю. Можно указать как одну анимацию на появление и скрытие, так и по отдельности При указании параметров data-tm-animation и data-tm-animation-[in, out], преймущество остаётся у параметров data-tm-animation-[in, out], при чём можно указать только [in] или только [out]
data-tm-duration int 300 - .tonyMenu__megamenu Длительность анимации появления, скрытия окна мегаменю -
data-tm-emersion-distance int 60 - .tonyMenu__megamenu Длина движения окна мегаменю при параметрах анимации 'emersion' и 'emersion-vertical' -

GRID

Управление сеткой происходит добавлением класса к родителю

Схема класса сетки Добавить к классу Значение Описание Пример
.tonyMenu__col-[int]-[int]-[int] .tonyMenu__megamenu 0 <= int <= 12

Сумма чисел int#1+int#2+int#3 обязательно должна равняться 12

0 - выключает колонку
Основная сетка мегаменю, управляет колонками .tonyMenu__box-left, tonyMenu__box-center, tonyMenu__box-right .tonyMenu__col-0-9-3
.tonyMenu__inner-col-[int] .tonyMenu__inner-list-group, .tonyMenu__list-preview 0 < int <= 6 Управляет колонками мегаменю списка первого уравня .tonyMenu__inner-col-3

JavaScript

Параметры:

  • paddingElem - указываем к каким эллементам добавляется дополнительный padding при фиксации body

Пример:

paddingElem [
	{
		breakpoint: 'desctop' || 'mobile',
		selector: [
			'.selector'
		]
	},
]
					

breakpoint - нужно выбрать на каком разрешении будет добавляться padding

selector - принимает массив строк с названиями селекторов, по которым будет происходить поиск

Методы:

  • showTonyMenu() - показать мобильное меню
  • hideTonyMenu() - скрыть мобильное меню

События:

Событие Описание
tonyMenu.initialize Инициализация меню произведена
tonyMenu.megamenu.change Начало появления и скрытия мегаменю
tonyMenu.megamenu.show.start Перед появлением мегаменю (свойство мегаменю display: 'none';)
tonyMenu.megamenu.show.go Старт анимации появления мегаменю (свойство мегаменю display: 'block'; opacity: '0';)
tonyMenu.megamenu.show.end После окончания анимации появления мегаменю
tonyMenu.megamenu.hide.start Перед скрытием мегаменю
tonyMenu.megamenu.hide.end После окончания анимации скрытия мегаменю
tonyMenu.mobile.show.start Перед появлением мобильного меню
tonyMenu.mobile.show.end После окончания анимации появлением мобильного меню
tonyMenu.mobile.hide.start Перед скрытием мобильного меню
tonyMenu.mobile.hide.end После окончания анимаци скрытия мобильного меню

Служебные классы и аттрибуты:

Название класса Описание Куда добавляется
.tonyMenu__initialize Добавляется после инициализации .tonyMenu
.tonyMenu__item-next-level Добавляется при инициализации эллементам списка li, у которых присутствует вложенный ul li
.tonyMenu__megamenu-scroll Добавляется к мегаменю если оно не влазит в экран и добавляется скрол .tonyMenu__megamenu
data-tm-active=[boolean] Добавляется к каждому мегаменю при инициализации и переключается при изменении статуса активности .tonyMenu__megamenu

Инициализация:

Если на странице находится больше одного меню, то к .tonyMenu добавляем любой дополнительный унакальный класс и инициализируем по нему. Одно меню - одна инициализация. (Не забываем активировать мобильное меню только лиш на одном из меню. [data-tm-mobile])

.tonyMenu() - jQuery метод инициализации плагина, возвращает обьект плагина (без обёртки jQuery, учитываем это!)

Пример:

var tonyMenu = jQuery('.tonyMenu').tonyMenu(obj); //obj - обьект парамметров
tonyMenu.showTonyMenu(); //вызов методов